import React, { Component } from "react";
import Header from "./components/Header";
import Footer from "./components/Footer";
import List from "./components/List";
import "./App.css";
export default class App extends Component {
  state = {
    todos: [
      { id: 1, description: "吃饭", done: true },
      { id: 2, description: "睡觉", done: false },
      { id: 3, description: "code", done: false },
    ],
  };
  addTodo = (newTodo) => {
    const { todos } = this.state;
    this.setState({
      todos: [newTodo, ...todos],
    });
  };
  updateTodo = (id, done) => {
    const { todos } = this.state;
    const newTodos = todos.map((todo) => {
      if (todo.id === id) return { ...todo, done };
      return todo;
    });
    this.setState({
      todos: newTodos,
    });
  };
  removeTodo = (id) => {
    const { todos } = this.state;
    const newTodos = todos.filter((todo) => {
      return todo.id !== id;
    });
    this.setState({
      todos: newTodos,
    });
  };
  changeAllTodo = (flag) => {
    const { todos } = this.state;
    const newTodos = todos.map((todo) => {
      return { ...todo, done: flag };
    });
    this.setState({
      todos: newTodos,
    });
  };
  clearDoneTodo = () => {
    const { todos } = this.state;
    const newTodos = todos.filter((todo) => {
      return !todo.done;
    });
    this.setState({
      todos: newTodos,
    });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo} />
          <List todos={todos} updateTodo={this.updateTodo} removeTodo={this.removeTodo} />
          <Footer todos={todos} changeAllTodo={this.changeAllTodo} clearDoneTodo={this.clearDoneTodo} />
        </div>
      </div>
    );
  }
}
